<!--
  因tabs属性并不包含于options属性之中，故只能跟其他options属性之内的属性值合并设置，此处选择与customClass合并！！
-->

<template>
  <div>
    <el-form-item label="风格类型">
      <el-select v-model="selectedWidget.displayType" default-first-option>
        <el-option v-for="(item, idx) in tabTypeOptions" :key="idx" :label="item.name" :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      :label="i18nt('designer.setting.customClass')">
      <el-select
        v-model="optionModel.customClass"
        multiple filterable allow-create
        default-first-option>
        <el-option v-for="(item, idx) in cssClassList" :key="idx" :label="item" :value="item"></el-option>
      </el-select>
    </el-form-item>
    <el-divider class="option-config-divider"><span class="title">{{ i18nt('designer.setting.tabPaneSetting') }}</span></el-divider>
    <el-form-item label-width="0" class="panes-setting">
      <draggable
        tag="ul"
        :list="selectedWidget.tabs"
        item-key="id"
        class="tab-icon-items"
        v-bind="{ group:'panesGroup', ghostClass: 'ghost', handle: '.drag-option' }"
      >
        <template #item="{ element: tpItem, index: tpIdx }">
          <li class="col-item tab-icon-item">
            <el-checkbox
              :modelValue="tpItem.options.active"
              @change="(evt) => onTabPaneActiveChange(evt, tpItem)"
              style="margin-right: 8px">
              {{i18nt('designer.setting.paneActive')}}
            </el-checkbox>
            <el-input link type="primary" v-model="tpItem.options.label"></el-input>
            <el-input link type="primary" v-model="tpItem.options.name"></el-input>
            <VfIcon name="move"  class="drag-option" />
            <el-button circle plain size="small" type="danger"
              @click="deleteTabPane(selectedWidget, tpIdx)"
              icon="el-icon-minus" class="col-delete-button">
            </el-button>
          </li>
        </template>
      </draggable>

      <div>
        <el-button link type="primary" @click="addTabPane(selectedWidget)">{{i18nt('designer.setting.addTabPane')}}</el-button>
      </div>
    </el-form-item>
  </div>
</template>

<script>
  import i18n from "@/utils/i18n"
  //import Draggable from 'vuedraggable'
  import {deepClone} from "@/utils/util";
  import { VfMessage } from '@/utils/vf-utils'

  export default {
    name: "tab-customClass-editor",
    componentName: 'PropertyEditor',
    mixins: [i18n],
    components: {
      //Draggable,
    },
    props: {
      designer: Object,
      selectedWidget: Object,
      optionModel: Object,
    },
    data() {
      return {
        cssClassList: [],
        // 标签风格选项
        tabTypeOptions: [
          { name: '默认风格', value: '' },
          { name: '卡片风格', value: 'card' },
          { name: '带边框卡片风格', value: 'border-card' }
        ]
      }
    },
    created() {
      this.cssClassList = deepClone(this.designer.getCssClassList())
      //监听表单css'代码改动事件并重新加载！
      this.designer.handleEvent('form-css-updated', (cssClassList) => {
        this.cssClassList = cssClassList
      })
    },
    methods: {
      onTabPaneActiveChange(evt, tpItem) {
        //TODO: !!!
        this.selectedWidget.tabs = this.selectedWidget.tabs.map((tp) => {
          tp.options.active = (tp.options.name === tpItem.options.name);
          return tp
        })
      },

      addTabPane(curTabs) {
        this.designer.addTabPaneOfTabs(curTabs)
        this.designer.emitHistoryChange()
      },

      deleteTabPane(curTabs, tpIdx) {
        if (curTabs.tabs.length === 1) {
          VfMessage.info(this.i18nt('designer.hint.lastPaneCannotBeDeleted'))
          return
        }

        this.designer.deleteTabPaneOfTabs(curTabs, tpIdx)
        this.designer.emitHistoryChange()
      },

    }
  }
</script>

<style lang="scss" scoped>
ul.tab-icon-items {
  width: 100%;
}
li.tab-icon-item {
  display: flex;
  list-style: none;
  margin-bottom: 8px;
  span.col-span-title {
    display: inline-block;
    font-size: 13px;
    width: 120px;
  }
  .drag-option {
    cursor: move;
    margin: 0 6px;
  }
}
.panes-setting {
  ul {
    padding-inline-start: 0;
    padding-left: 0; /* 重置IE11默认样式 */
    margin: 0;
  }
  li.ghost {
    background: #fff;
    border: 2px dotted $--color-primary;
  }
}

</style>
